<template>
  <div class="processBox">
    <!-- <el-divider /> -->
    <div class="timelineProcessBox">
      <el-timeline class="timeline">
        <!-- :timestamp="activity.time" -->
        <el-timeline-item
          class="lineitem"
          :class="activity.done ? 'active' : 'inactive'"
          v-for="(activity, index) in activities"
          :key="index"
        >
          <div class="shang" v-if="index % 2 === 0">
            <span style="display: flex; flex-direction: column">
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :fit="fit"
              />
              <span style="color: #8c8c8c; font-size: 14px">
                {{ activity.people }}
              </span>
              <span style="margin: 10px 0; font-size: 16px">
                {{ activity.content }}
              </span>
            </span>
          </div>
          <div class="xia" v-if="index % 2 !== 0">
            <span style="display: flex; flex-direction: column">
              <span style="margin: 10px 0; font-size: 16px">
                {{ activity.content }}
              </span>
              <span style="color: #8c8c8c; font-size: 14px">
                {{ activity.people }}
              </span>
              <el-image
                style="width: 100px; height: 100px"
                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                :fit="fit"
              />
            </span>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script lang="ts" setup>
const activities = [
  {
    content: "开工阶段",
    time: "2018-04-12 20:46",
    people: "五六七",
    done: true
  },
  {
    content: "实施阶段",
    people: "吉吉国王",
    done: false,
    time: "2018-04-03 20:46"
  },
  {
    content: "竣工阶段",
    done: false,
    people: "熊大",
    time: "2018-04-03 20:46"
  },
  {
    content: "结算阶段",
    people: "",
    done: false,
    time: ""
  }
]
</script>
<style lang="less" scoped>
.shang {
  position: absolute;
  top: -200px;
  left: -50px;
}
.xia {
  position: absolute;
  top: 0px;
  left: -50px;
}
.processBox {
  width: 510px;
  background-color: #fff;
  height: 210px;

  .title {
    font-size: 16px;
    font-weight: 600;
    padding-left: 32px;
    padding-top: 16px;
  }
  .timelineProcessBox {
    .timeline {
      display: flex;
      width: 100%;
      margin: 40px auto;
      .lineitem {
        transform: translateX(50%);
        width: 25%;
      }
    }
  }
}

:deep(.el-timeline-item__tail) {
  border-left: none;
  border-top: 2px solid #e4e7ed;
  width: 100%;
  position: absolute;
  top: 6px;
}
:deep(.el-timeline-item__wrapper) {
  padding-left: 0;
  position: absolute;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
}
:deep(.el-timeline-item__timestamp) {
  font-size: 14px;
}
.active {
  :deep(.el-timeline-item__node) {
    background-color: red;
  }
  :deep(.el-timeline-item__tail) {
    border-color: #e4e7ed;
  }
}
// 有active样式的下一个li
.active + li {
  :deep(.el-timeline-item__node) {
    background-color: green;
  }
}
</style>
